Jassif Team Institution

The <div> Element

<div> উপাদানটি ডিফল্টভাবে একটি ব্লক উপাদান, যার অর্থ এটি সমস্ত উপলব্ধ প্রস্থ গ্রহণ করে এবং অগ্রণী এবং পরবর্তী লাইন বিরতির সাথে আসে।

Example

একটি <div> উপাদান সমস্ত উপলব্ধ প্রস্থ গ্রহণ করে:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

<div> উপাদানটির কোনো প্রয়োজনীয় বৈশিষ্ট্য নেই, তবে শৈলী, শ্রেণি এবং আইডি সাধারণ।

<div> as a container

<div> উপাদানটি প্রায়শই একটি ওয়েব পৃষ্ঠার অংশগুলিকে একত্রিত করতে ব্যবহৃত হয়।

Example

HTML উপাদান সহ একটি <div> উপাদান:

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

Center align a <div> element

আপনার যদি এমন একটি <div> উপাদান থাকে যা 100% চওড়া না হয় এবং এটিকে কেন্দ্র-সারিবদ্ধ করতে চান, তাহলে CSS মার্জিন বৈশিষ্ট্য অটোতে সেট করুন।

Example

<style>
div {
  width:300px;
  margin:auto;
}
</style>

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

Multiple <div> elements

একটি একক পৃষ্ঠাতে একাধিক <div> কন্টেইনার থাকতে পারে।

Example

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 9 million inhabitants.</p>
</div>

<div>
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 700,000 inhabitants.</p>
</div>

<div>
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has over 4 million inhabitants.</p>
</div>

Aligning <div> elements side by side

ওয়েব পৃষ্ঠাগুলি তৈরি করার সময়, আপনি প্রায়শই দুটি বা ততোধিক <div> উপাদান পাশাপাশি রাখতে চান:

উপাদানগুলিকে পার্শ্বীয়ভাবে সারিবদ্ধ করার জন্য বিভিন্ন পদ্ধতি রয়েছে, সমস্ত কিছু CSS স্টাইলিং জড়িত। আমরা সবচেয়ে সাধারণ পদ্ধতিগুলি দেখব:

.mycontainer div {
  width:33%;
  float:left;
}

div {
  width: 30%;
  display: inline-block;
}

.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}

.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}

Exercise

নিম্নলিখিত কোড বিবেচনা করুন:

<div style='width:200px;margin:auto'>
  <h2>London</h2>
</div>

HTML Tags